<template>
  <div class="el-form-modify">
    <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
      <el-form-item label="经销商类型" prop="type">
        <el-select style="width: 100%" v-model="formData.type">
          <el-option
            v-for="dealer in Object.keys(DealerType)"
            :key="dealer"
            :value="dealer"
            :label="DealerType[dealer]"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经销商层级" prop="level">
        <el-select style="width: 100%" v-model="formData.level">
          <el-option
            v-for="level in Object.keys(DealerLevel)"
            :key="level"
            :value="level"
            :label="DealerLevel[level]"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经销商名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="经销商商标" prop="icon">
        <upload-image v-model="formData.icon" :uploadUrl="uploadDealerUrl"></upload-image>
      </el-form-item>
      <el-form-item label="联系人" prop="contact">
        <el-input v-model="formData.contact" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="cellphone">
        <el-input v-model="formData.cellphone" placeholder="请输入"></el-input>
      </el-form-item>
      {{editData}}
      <el-form-item v-if="!formData.id" label="代理产品" prop="proxies">
        <el-row
          v-for="(proxie, index) in formData.proxies"
          :key="index"
          style="position: relative; margin-bottom: 16px;"
        >
          <el-col :span="8">
            <el-select v-model="proxie.productId">
              <el-option
                v-for="product in productList"
                :key="product.id"
                :value="product.id"
                :label="product.name"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            价格
            <el-input-number
              class="inline-number"
              v-model="proxie.price"
              controls-position="right"
              :min="0.01"
              :precision="2"
              style="width: 100px"
            ></el-input-number>元
          </el-col>
          <el-col :span="8">
            佣金
            <el-input-number
              class="inline-number"
              v-model="proxie.commission"
              controls-position="right"
              :min="0.01"
              :precision="2"
              style="width: 100px"
            ></el-input-number>元
          </el-col>
          <el-button
            v-if="index != 0"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            circle
            @click="deleteProduct(index)"
            style="position: absolute; top: 8px; right: -20px;"
          ></el-button>
        </el-row>
        <el-button @click="addProduct" icon="el-icon-plus" size="small">添加</el-button>
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio label="NORMAL">启用</el-radio>
          <el-radio label="UNNORMAL">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          style="margin-left: 100px"
          type="primary"
          @click="save"
          :loading="saving"
        >确认</el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadImage from "@/components/UploadImage";
import { dealerPathPrefix } from "@/settings";
import { DealerType, STATUS, DealerLevel } from "@/utils/const";
import { productEnableAll } from "@/api/product";
import { dealerAdd, dealerEdit, dealerProfile, uploadDealerUrl } from "@/api/dealerMgt";
import { rules } from "@/utils/validate";

export default {
  components: {},
  name: "createDealerMgt",
  props: ["editData"],
  components: { UploadImage },
  data() {
    this.DealerType = DealerType;
    this.DealerLevel = DealerLevel;
    this.STATUS = STATUS;

    let formData = {
      type: "ENTERPRISE",
      level: "FIRST",
      name: "",
      contact: "",
      cellphone: "",
      status: "NORMAL",
      proxies: [
        {
          productId: "",
          price: "",
          commission: ""
        }
      ]
    };
    return {
      uploadDealerUrl,
      formData,
      pathPrefix: dealerPathPrefix,
      productList: [],
      saving: false,
      rules: {
        name: [rules.required, rules.text2_32],
        contact: [rules.required, rules.text2_32],
        cellphone: [rules.required, rules.phone],
        proxies: [
          {
            validator(rule, value, callback) {
              for(let item of value) {
                if (!item.productId) {
                  return callback(new Error("请选择产品"))
                }
              }
              callback();
						},
						
          }
        ]
      }
    };
  },
  methods: {
    async requestProduct() {
      const { data } = await productEnableAll();
      this.productList = data;
    },
    async requestBaseInfo(id) {
      const { data } = await dealerProfile(id);
      this.formData = {
        ...data,
        cellphone: data.phone
      };
    },
    addProduct() {
      this.formData.proxies.push({
        productId: "",
        price: "",
        commission: ""
      });
    },
    deleteProduct(index) {
      this.formData.proxies.splice(index, 1);
    },
    save() {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return;
        }
        try {
          this.saving = true;
          let postData = { ...this.formData };
          if (this.id) {
            delete postData.proxies;
          }
          const method = this.formData.id ? dealerEdit : dealerAdd;
          await method(postData);
          this.saving = false;
          this.$message.success('保存成功!');
          this.$emit("refresh");
          this.cancel();
        } catch (err) {
          this.saving = false;
        }
      });
    },
    cancel() {
      this.$router.go(-1);
    }
  },
  created() {
    if (this.$route.name === "editDealer") {
      const { id } = this.$route.params;
      if (id) {
        this.dealerId = id;
        this.requestBaseInfo(id);
      } else {
        this.cancel();
        return;
      }
    }
    this.requestProduct();
  }
};
</script>

<style lang="scss" scoped>
</style>
